<template>
  <div class="user">
    <div class="top" v-show="show">
      <div class="avatar">
        <img :src="dalImg(user.avatar)" alt="" />
      </div>
      <p class="niname">{{ user.nickName ? user.nickName : user.userName }}</p>
      <div class="icon">
        <icon class="icona" name="chat-o" />
        <icon class="icona" name="setting-o" />
      </div>
    </div>
    <div class="head">
      <div class="avatar">
        <img :src="dalImg(user.avatar)" alt="" />
      </div>
      <p class="niname">{{ user.nickName ? user.nickName : user.userName }}</p>
      <div class="sign">
        <img @click="chechIn" src="../assets/image/签到.png" alt="" />
        <p class="jifen">积分:{{ user.score }}</p>
      </div>
    </div>
    <div class="order">
      <grid>
        <grid-item icon="orders-o" text="全部订单" />
        <grid-item icon="todo-list-o" text="待付款" />
        <grid-item icon="gift-o" text="待收货" />
        <grid-item icon="coupon-o" text="优惠卷" />
      </grid>
    </div>
    <div class="main">
      <cell class="cellfirst" title="我的订单" is-link />
      <cell :to="{ name: 'ModInfo' }" title="个人信息" is-link value="" />
      <cell :to="{ name: 'ModPwd' }" title="修改密码" is-link value="" />
      <Button type="danger" size="large" class="logout" @click="logOut"
        >退出登录</Button
      >
    </div>
    <MayLike></MayLike>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Icon, Cell, Button, Grid, GridItem, Toast } from "vant";
import { useRouter } from "vue-router";
import { loadUserInfoAPI, checkInAPI } from "../services/auth";
import { removeToken } from "../utils/auth";
import { checkedToday } from "../utils/tools";
import { dalImg } from "../utils/tools";
import MayLike from "../components/MayLike.vue";

const router = useRouter();
const user = ref({});
const show = ref(false);
//显示顶部栏
//一个页面执行两个滚动事件
function addEvent(obj, type, fn) {
  if (obj.attachEvent) {
    obj.attachEvent("on" + type, function () {
      fn.call(obj);
    });
  } else {
    obj.addEventListener(type, fn, false);
  }
}
addEvent(window, "scroll", function () {
  var move = document.documentElement.scrollTop;
  if (move > 10) {
    show.value = true;
  } else {
    show.value = false;
  }
});

//退出登录
const logOut = () => {
  removeToken();
  router.push({
    name: "Index",
  });
};

//获取用户信息
const loadUserInfo = () => {
  loadUserInfoAPI().then((res) => {
    user.value = res.data;
  });
};
loadUserInfo();

//签到
const chechIn = async () => {
  if (!checkedToday()) {
    await checkInAPI();
    loadUserInfo();
  } else {
    Toast("当天已签到了");
  }
};
</script>
<!-- 样式 -->
<style scoped lang="scss">
.user {
  position: relative;
}
.top {
  position: fixed;
  width: 100%;
  height: 8vh;
  z-index: 99;
  padding-top: 0.5rem;
  padding-left: 1rem;
  background: linear-gradient(to right, #fb3f71 10%, #f84d4e 100%);
  .icon {
    float: right;
    margin-right: 5vw;
    margin-top: 1vh;
  }
  .icona {
    font-size: 1.5rem;
    color: white;
    margin: 1vh 2vw;
  }
  .avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid #b8b3b3;
    overflow: hidden;
    text-align: center;
    position: relative;
    float: left;
    img {
      height: 3rem;
    }
  }
  .niname {
    line-height: 6vh;
    width: 30vw;
    height: 6vh;
    float: left;
    margin-left: 4vw;
    color: #ffffff;
    font-size: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.head {
  width: 100%;
  height: 20vh;
  padding-top: 2rem;
  padding-left: 2rem;
  background: linear-gradient(to right, #fb3f71 10%, #f84d4e 100%);

  .avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    border: 1px solid #b8b3b3;
    overflow: hidden;
    text-align: center;
    position: relative;
    float: left;
    img {
      height: 6rem;
    }
  }
  .niname {
    line-height: 12vh;
    width: 30vw;
    height: 12vh;
    float: left;
    margin-left: 5vw;
    color: #ffffff;
    font-size: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .jifen {
    width: 15vw;
    margin: 2vh 4vw;
    color: white;
  }
  .sign {
    float: right;
    width: 30vw;
    margin-top: 4vh;
    // margin-right: 5vw;
  }
}
.order {
  width: 95vw;
  height: 15vh;
  margin: 10px auto;
  border-radius: 10px;
  background-color: rgb(253, 253, 253);
  padding: 5px;
  padding-top: 20px;
}
.main {
  width: 95vw;
  height: 40vh;
  margin: 10px auto;
  border-radius: 10px;
  background-color: rgb(253, 253, 253);
  padding: 5px;
  padding-top: 20px;
  .logout {
    width: 75vw;
    display: block;
    margin: 10vh auto 5vh;
    border-radius: 8px;
  }
}
</style>
